/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<template>
  <section class="content">
    <div class="search">
      <div class="left" @click="goProjectListMap">
        <i class="iconfont icon-ditu" style="font-size: 26px; color: #fff;"></i>
      </div>
      <div class="right">
        <search v-model="searchVlaue" position="absolute" ref="search"></search>
      </div>
    </div>
    <!--    <div class="search">
      <search v-model="searchVlaue" position="absolute" ref="search"></search>
    </div> -->
    <div class="filterBar">
      <filter-bar top="43" :bar-menus="barMenus" @showDialog="handleShowDialog" @closeDialog="handleCloseDialog" @changeTab="handleChangeTab" @changeMainItem="handleChangeMainItem" @changeSelect="changeData"></filter-bar>
    </div>
    <ul class="main">
      <mescroll-vue ref="mescroll" :down="mescrollDown" @init="mescrollInit">
        <li class="project_item" v-for="(item,index) in data" :key="index" @click="goProject(item)">
          <div class="left">
            <img :src="item.litpic" :alt="item.shorTitle">
          </div>
            <div class="right">
              <p class="top">
                <b>{{item.shortTitle}}</b>
                <b :style="{color: getStatusColor(item.status)}">{{item.status | getCN}}</b>
              </p>
              <p class="middle">
                <b class="type"><span>{{item.type | getCN}}</span></b>
                <b class="info">
                <span class="area">{{item.levyArea}}m²</span><span style="padding: 0 5px;">|</span><span class="area">{{item.planned}}户</span>
              </b>
              </p>
              <p class="bottom">{{item.address}}</p>
            </div>
        </li>
      </mescroll-vue>
    </ul>
  </section>
</template>
<script>
import _ from "lodash";
import { Search, Group, Cell, XButton, Toast } from "vux";
import { reqProjectList, } from '../../api/index.js';
import FilterBar from "../../components/FilterBar/FilterBar.vue";
import barMenus from "../../mock/filterBarData.js";
import MescrollVue from "mescroll.js/mescroll.vue";
import { setTimeout } from "timers";
import { statusCN, typeCN } from '../../util/contact.js';
import { sortBy } from '../../util/util.js';
export default {
  data() {
    return {
      data: [], //列表数据
      barMenus: barMenus,
      searchVlaue: "",
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        callback: this.downCallback,
        auto: true,
        isBoth: false
      },
      filterData: {
        status: '',
        sortid: ''
      }
    };
  },
  mounted() {
    // 初始化数据
    this.queryData();
  },
  watch: {
    searchVlaue: function(data) {
      this.handlerSearch(data);
    },
  },
  methods: {
    handlerSearch: _.debounce(async function(data) {
      const self = this;
      self.queryData({ keyWord: data, status: self.filterData.status, sortid: self.filterData.sortid });
    }, 500),
    async queryData(data) {
      const self = this;
      this.$store.dispatch('changeLoadingVis', { data: true })
      const result = await reqProjectList(data);
      if (result.code === 1) {
        // this.data = result.data;
        let listData = result.data;
        if(self.filterData.sortid ==="area_planed"){
          listData.sort(sortBy('levyArea',false));
        }
        this.data = listData;
      } else {
        this.$vux.toast.show({ type: "text", text: result.msg || '请求失败!' })
      }
      this.$store.dispatch('changeLoadingVis', { data: false });

    },
    getStatusColor(status) {
      let colors = {
        PLAN: "#fe574d",
        IN_PROGRESS: "#39f",
        COMPLETED: "#3cd686",
      };
      return colors[status];
    },
    handleShowDialog(v) {
      // console.log(v);
    },
    handleCloseDialog(v) {
      // console.log(v);
    },
    handleChangeTab(v) {
      // console.log(v);
    },
    handleChangeMainItem(v) {
      // console.log(v)
    },
    changeData(v) {
      console.log('改变值', v);
      const self = this;
      self.filterData = { status: v[0].value, sortid: v[1].value };
      self.queryData({ keyWord: self.searchVlaue, status: v[0].value, sortid: v[1].value, keyWord: self.searchVlaue });
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    downCallback(mescroll) {
      const self = this;
      self.queryData({ keyWord: self.searchVlaue, status: self.filterData.status, sortid: self.filterData.sortid });
      mescroll.endSuccess();
    },
    upCallback(page, mescroll) {
      console.log("上啦加载");
      setTimeout(() => {
        this.$nextTick(() => {
          mescroll.endSuccess();
        });
      }, 1000);
    },
    goProject(item) {
      this.$router.push({ name: 'project', query: { seqno: item.seqno } })
    },
    goProjectListMap() {
      this.$router.push({ name: 'projectListMap' })
    }
  },
  components: {
    Search,
    Group,
    Cell,
    XButton,
    "filter-bar": FilterBar,
    MescrollVue
  }
};

</script>
<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();
  height: calc(~"100% - 51px");
}

.search {
  height: 44px;
  width: 100%;
  background: @primary;
  .mix-flex-center();

  .left {
    flex: 0 0 40px;
    .mix-flex-center();
  }

  .right {
    flex: 1;
    height: 100%;
    position: relative;
  }
}

.filterBar {
  width: 100%;
  height: 40px;
  z-index: 9;
  position: relative;
}

.main {
  .be-full();
  background: @white;
  height: calc(~"100% - 84px");

  li {
    .mix-text-overflow();
  }
}

.content /deep/ .weui-search-bar__form {
  border-radius: 10px;
}

// item
.project_item {
  .mix-flex-center();
  margin: 0 10px;
  padding: 10px 0;
  border-bottom: 1px solid @border-base;
  height: 90px;

  &:last-child {
    border: none;
  }

  .left {
    height: 100%;
    flex: 0 1 70px;
    margin-right: 8px;
    border-radius: 5px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
    }
  }

  .right {
    flex: 1;
    overflow: hidden;

    b {
      flex: 1;
      font-size: 14px;
      font-weight: normal;

      &:first-child {
        .mix-text-overflow();
        text-align: left;
      }

      &:last-child {
        text-align: right;
        white-space: nowrap;
      }
    }

    .top {
      .mix-flex-x-center();

      b {
        &:first-child {
          font-weight: 600;
        }

        &:last-child {}
      }

    }

    .middle {
      .mix-flex-x-center();

      .type {
        span {
          background: @primary;
          color: @white;
          font-size: 10px;
          padding: 3px 5px;
          border-radius: 3px;
        }
      }
    }

    .bottom {
      .mix-text-overflow();
    }
  }
}

</style>
